<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {RouterView} from 'vue-router'
import {useRouter} from 'vue-router'

const router = useRouter()
const navActive = ref('home')
//加载完毕后跳转到首页
onMounted(() => {
  navActive.value = sessionStorage.getItem('navActive')
  if (navActive.value) {
    router.push(`/${navActive.value}`)
  }else {
    router.push('/home')
  }
})
// 监听路由变化
const navActiveChange = (index) => {
  router.push(`/${index}`)
  sessionStorage.setItem('navActive', index)
}

</script>

<template>
  <!--首页的容器-->
  <div class="index-container">
    <!--页面展示-->
    <RouterView/>
    <!--底部的导航栏-->
    <footer class="index-nav-bottom">
      <van-tabbar v-model="navActive" @change="navActiveChange">
        <van-tabbar-item name="home" icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item name="video" icon="video">视频</van-tabbar-item>
        <van-tabbar-item name="mine" icon="manager">我的</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>


<style scoped lang="scss">
.index-container {
  position: relative;
  width: 100%;
  height: 100vh;

  // 页脚的导航栏
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
  }
}

</style>
